<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>日期与时间选择</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
		<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="layui-inline">
			<input type="text" class="layui-input" id="date1" />
		</div>
		<hr>
		<div class="layui-inline">
			<input type="text" class="layui-input" id="date2" />
		</div>
		<div class="layui-inline">
			<input type="text" class="layui-input" id="date3" />
		</div>
		<div class="layui-inline">
			<input type="text" class="layui-input" id="date4" />
		</div>
		<div class="layui-inline">
			<input type="text" class="layui-input" id="date5" />
		</div>
		<div class="layui-inline">
			<input type="text" class="layui-input" id="date6" />
		</div>
		
		<hr>
		<div class="layui-inline">
			<input type="text" class="layui-input" id="date7" />
		</div>
		
		<hr>
		<div class="layui-inline">
			<input type="text" class="layui-input" id="date8" />
		</div>
		<div class="layui-inline">
			<input type="text" class="layui-input" id="date9" />
		</div>
		
		
		<script type="text/javascript">
			// 加载laydate模块
			layui.use('laydate',function(){
				var laydate = layui.laydate;
				
				// 加载laydate示例
				laydate.render({
					elem:"#date1" // 绑定id为date1的元素
				});
				
				laydate.render({
					elem:"#date2" ,// 绑定id为date1的元素
					type:"year" // 年选择器
				});
				laydate.render({
					elem:"#date3" ,// 绑定id为date1的元素
					type:"month" // 年月选择器
				});
				
				laydate.render({
					elem:"#date4" ,// 绑定id为date1的元素
					type:"date" // 年月日选择器
				});
				laydate.render({
					elem:"#date5" ,// 绑定id为date1的元素
					type:"time" // 时间（时分秒）选择器
				});
				
				laydate.render({
					elem:"#date6" ,// 绑定id为date1的元素
					type:"datetime" // 年月日时分秒选择器
				});
				
				//自定义日期格式
				laydate.render({ 
				  elem: '#date7'
				  //,format: 'yyyy年MM月dd日' //可任意组合
				  ,format: 'yyyy/MM月dd日'
				});
				
				// 传入符合format格式的字符给初始值
				laydate.render({ 
				  elem: '#date8'
				  ,value: '2018-08-18' //必须遵循format参数设定的格式
				});
				 
				// 传入Date对象给初始值
				laydate.render({ 
				  elem: '#date9'
				  ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
				});
				
				
				
			});
			
			
			
		</script>
	</body>
</html>
